<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        /*p{background-color: #ececec;width: 300px;height: 200px;float: left}*/
        .one{max-width: 300px;max-height: 100px}
        .two{min-width: 100px;min-height: 100px}
        .three{width: 150px;height:100px;background-color: #ececec;line-height: 100px;}
        .three{border-top-width: 10px;
               border-top-color: red;
               border-top-style: dotted;
               border-right-width: 10px;
               border-right-color: #008800;
               border-right-style: solid;
               border-bottom-width: 5px;
               border-bottom-color: green;
               border-bottom-style: double;
               border-left: 10px gray dashed ;

        }
        .four{width: 300px;height: 300px;background-color:beige;
        padding: 20px 50px 100px 8px}
        .content{width: 100px;height: 100px;background-color: #008800;
            padding:20px 50px 20px 20px;}
        .five{
            width:300px;height: 300px;background-color: palegoldenrod;
            margin: auto;
        }
        .six{
            width:300px;height: 300px;background-color: palegoldenrod;
            margin: 20px;
        }
        .seven{
            width:300px;height: 300px;background-color: palegoldenrod;
            margin: 100px;}
         div,span{background-color: #00aaee;
            border: 1px #666666 solid}
        /*呈现行内元素，但有块级元素的特征*/
        div{display: inline-block;
        font-size: 16px;
        width: 100px;
        height: 30px;
        padding: 5px;
        margin: 10px;
        }
        /*!*span{display: block;}*!*/
        /*!*span{display: block;*!*/
            /*!*width: 100px;*!*/
            /*!*height: 30px;*!*/
            /*!*padding: 5px;*!*/
            /*!*margin: 10px;*!*/

        /*}*/
        /*span{display: none;}*/
        a:hover span{display: block}
    </style>
</head>
<body>
    <p>盒子模型宽度width：50%<p/>
    <p class="one">盒子模型最大宽度max-width：300px<p/>
    <p class="two">盒子模型最大宽度min-width：100px<p/>
    <p class="three">边框属性border</p>
    <div class="four"><div class="content">padding属性</div></div>
    <p class="five">margin属性</p>
    <p class="six">margin属性</p>
    <p class="seven">margin属性</p>
<!--块级元素-->
    <div>display属性-div</div>
    <div>display属性-div</div>
    <div>display属性-div</div>
    <hr/>
    <!--内联元素-->
    <span>display属性</span>
    <span>display属性</span>
    <span>display属性</span>
    <a href="#">指我...<span>和你捉迷藏</span></a>

</body>
</html>